import { useNavigate } from "react-router-dom";
import api from "@/api";
import "./index.scss";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Checkbox, Form, Input, message, Space } from "antd";
const { jwt } = api;

export default function Login() {
  const navigate = useNavigate();
  const [form] = Form.useForm();

  const handleLogin = async (values) => {
    try {
      const { username, password } = values;
      const params = { username, password };
      const res = await jwt.login(params);
      localStorage.setItem("token", `Bearer ${res.data}`);
      message.success("Login successful! Welcome back!");
      navigate("/board/pdca");
    } catch (error) {
      message.error("Login failed. Please check your credentials.");
    }
  };

  return (
    <div className="login">
      <div className="container">
        <div className="bg">
          <img src={require("@/assets/images/login_bg.png")} alt="Login background" />
        </div>
        <div className="board">
          <h1>Welcome Back</h1>
          <Form
            form={form}
            name="login"
            className="login-form"
            initialValues={{ remember: true }}
            onFinish={handleLogin}
            size="large"
            layout="vertical"
          >
            <Form.Item
              name="username"
              label="用户名"
              rules={[
                { required: true, message: "Please input your username!" },
                { min: 3, message: "Username must be at least 3 characters!" }
              ]}
            >
              <Input
                prefix={<UserOutlined />}
                placeholder="请输入用户名"
                autoComplete="username"
                allowClear
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                { required: true, message: "Please input your password!" },
                { min: 6, message: "Password must be at least 6 characters!" }
              ]}
            >
              <Input.Password
                prefix={<LockOutlined className="site-form-item-icon" />}
                placeholder="Password"
                autoComplete="current-password"
              />
            </Form.Item>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>Remember me</Checkbox>
              </Form.Item>
              <a className="login-form-forgot" href="#/forgot-password">
                Forgot password?
              </a>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button">
                Sign In
              </Button>
              <div style={{ textAlign: "center", marginTop: "1rem" }}>
                <Space>
                  <span>没有账号？</span>
                  <a href="#/register">
                    <UserOutlined /> 立即注册
                  </a>
                </Space>
              </div>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
}
